<template>
	<m-layout gap="0 24" title="权益积分回购">
		<view slot="right"><text @click="Jump(`/pages/wallet/repo/record/record?coinid=${coinid}`)">回购记录</text></view>
		<!-- 回购 -->
		<m-block gap="30" spa="30 0">
			<view class="">
				<view class="currentPrice flex ptb-24 plr-24 fs24">
					<m-icon type="icon-jiage" color="#009f04"></m-icon>
					<text class="ml-12">当前回购价格：</text>
					<text class="fs28 fw-600">{{price}} CNY</text>
				</view>
				<view class="formitem flex-column mtb-24">
					<view class="flex-between">
						<text class="fs30 fw-400">回购数量</text>
						<text class="fs21 zichan">权益积分</text>
					</view>
					<view class="mtb-24">
						<input  type="number" v-model="amount" placeholder="请输入回购数量" placeholder-class="cell-input" />
					</view>
					<view class="balance flex-between">
						<text class="text-primary fs24">余额：{{ nowCoin['balance'] - nowCoin['lockbalance'] }}</text>
						<text @click="showHand" class="fs21 all">全部</text>
					</view>
					<!-- <view class="fee fs24">
						<text>手续费：</text>
						<text>{{times(amount,price,0.1)}}</text>
					</view> -->
				</view>
				<view class="getBox flex-column">
					<text class="fs24 mb-16 fw-600">回购可获得</text>
					<view class="flex-column ml-20">
						<view class="flex">
							<m-icon type="icon-yiwancheng-yiban-01" color="var(--theme)" size="30" class="mr-12"></m-icon>
							<text class="fs30">{{times(amount,price,0.7)}}</text>
							<text class="fs24 ml-4">个人账户</text>
						</view>
						<view class="flex">
							<m-icon type="icon-yiwancheng-yiban-01" color="var(--theme)" size="30" class="mr-12"></m-icon>
							<text class="fs30">{{times(amount,price,0.2)}}</text>
							<text class="fs24 ml-4">购物券</text>
						</view>
					</view>
				</view>
				<view class=" flex-column mt-16 ">
					<view class=" fs21 text-grey">
						回购说明：70%到个人账户，20%兑换成购物券，10%手续费
					</view>
				</view>
				
			</view>
		</m-block>
		<view class="btn-box"><m-button @click="verify">确定</m-button></view>
		<!-- 权益积分价格 -->
		<!-- <m-block spa="20 0 0 " gap="20" title="">
			<view class="flex mb-16 ml-12">
				<m-icon type="icon-quxiantu" color="var(--theme)" class="mr-8"></m-icon>
				<text class="fs28  text-primary">价格曲线</text>
			</view>
			<qiun-data-charts :opts="opts" type="area" :chartData="chartData" :ontouch="true" :canvas2d="false" />
		</m-block> -->
		<m-pay title="确认回购操作" :isPay="true" :isShow="show" :showCancel="true" @handleConfirm="buyback"
			@handleCancel="show = false">
			<view class="pay-Box">
				<view class="hint flex-between">
					<text>回购数量</text>
					<text>{{ amount }}</text>
				</view>
				<view class="hint flex-between">
					<text class="fw-600">手续费</text>
					<text>{{times(amount,0.2)}}</text>
				</view>
			</view>
		</m-pay>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { GetDaytotal,buyback,} from "@/api/Trade"
	export default {
		data() {
			return {
				coinid: '5',
				price: 10, // 回购价格
				amount: '', // 回购数量
				show: false,
				opts: {
					enableScroll: true,
					// animation:true,
					// enableScroll: true, //开启图表拖拽功能
					padding: [10, 10, 0, 0],
					fontSize: 10,
					// dataPointShape: false, //是否显示数据点的图形标识
					dataLabel: false, //是否显示图表区域内数据点上方的数据文案
					tapLegend: false, //是否显示图表区域内数据点上方的数据文案
					dataPointShapeType: 'solid',
					color: ["#149B2D"], //主题颜色
					extra: {
						area: { //区域图
							width: 2,
							type: "straight", ///可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
							opacity: 0.3, //区域图透明度
							gradient: true, //是否显示区域渐变色
							gradient: true, //是否开启区域图渐变色
							activeType: "none", //鼠标点击实心点后变为空心点                            
						},
						tooltip: {
							legendShow: false,
							splitLine: false,
							fontSize: 10,
							bgColor: '#149B2D',
							borderOpacity: 1,
							borderRadius: 5,
							lineHeight: 15,
							fontColor: '#fff',
							gridColor: '#149B2D',
						},
					},
					xAxis: {
						scrollShow: true,
						axisLine: false,
						fontSize: 8,
						itemCount: 10, 
						// disableGrid: true
						// boundaryGap:'justify',
						// titleOffsetX:10
						
					},
					yAxis: {
						gridType: "solid",
						gridColor: "rgba(51, 51, 51, 0.1)",
						data: [{
							tofix: 4,
						}]
					},
					legend: {
						// show:false,
					},
					subtitle: {
						fontSize: "13"
					},
				},
				chartData: {}
			}
		},
		computed: {
			...mapState({
				userbalance: state => state.user.userbalance,
				config: state => state.general.config,
			}),
			nowCoin() {
				return this.userbalance[this.coinid];
			},
			// 回购手续费
			fee() {
				return 0
			}
		},
		onLoad({ coinid }) {
			this.coinid = coinid || '5';
			this.GetDaytotal();
		},
		methods: {
			showHand() {
				this.amount = this.integer(this.nowCoin['balance'] - this.nowCoin['lockbalance'], 2);
			},
			verify() {
				if (!this.amount) {
					return this.Toast('请输入回购数量');
				}
				if(Number(this.amount)>Number(this.nowCoin['balance'] - this.nowCoin['lockbalance'])){
					return this.Toast('余额不足');
				}
				this.show = true;
			},
			// 提交用户转让
			async buyback(pwd) {
				const { success, msg } = await buyback({
					amount: this.amount,
					paypassword: pwd,
				});
				this.Toast(msg);
				if (success) {
					this.amount = '';
					this.show = false;
					this.Jump(`/pages/wallet/repo/record/record?coinid=${this.coinid}`);
				}
			},
			// 权益积分价格
			async GetDaytotal() {
				const { list, success } = await GetDaytotal({
					pageSize: 20
				})
				let times = [];
				let allNum = []; //每日领取
				let arr = list;
				arr.forEach(item => {
					times.push(item.inday.slice(5))
					allNum.push(this.integer(item.dayprice, 4))
				})
				const datas = {
					categories: times,
					series: [{
						name: '价格',
						legendText: '每日价格',
						data: allNum
					}]
				}
				this.price=list.pop().dayprice;
				console.log('datas===>',datas)
				this.chartData = JSON.parse(JSON.stringify(datas));
			},
		}
	}
</script>

<style lang="scss">
	.currentPrice {
		color: #009f04;
		border-radius: 12rpx;
		background-color: rgba(42, 204, 61, 0.18);
	}

	.formitem {
		padding: 24rpx 30rpx;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		// border-bottom: 1rpx solid #eeeeee;
		border: 1px solid var(--theme);

		.zichan {
			background-color: #009f04;
			border-radius: 40rpx;
			padding: 8rpx 16rpx;
			color: #fff;
		}

		.all {
			border: 1px solid var(--theme);
			color: #009f04;
			border-radius: 12rpx;
			padding: 4rpx 12rpx;
		}

		input {
			padding: 24rpx;
			flex: 1;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			border-radius: 16rpx;
			background-color: rgba(0, 0, 0, 0.06);
		}

		.cell-input {
			color: #999;
		}
	}

	.getBox {
		border-radius: 24rpx;
		padding: 24rpx 30rpx;
		border: 1px solid rgba(42, 204, 61, 0.5);
		color: #333;
	}

	.btn-box {
		padding: 30rpx 0 20rpx;
	}

	.pay-Box {
		padding: 0 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;

		text:nth-of-type(1) {
			color: #999999;
		}

		text:nth-of-type(2) {
			color: #333333;
		}

		view+view {
			padding-top: 20rpx;
		}
	}
</style>